<!-- 个人信息 -->
<template>
  <div style="display: flex">
    <div class="content-area">
      <div v-if="isUpdate" style="margin-top: 10px;width: 400px;margin-left: 40px">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="账号">
            <el-input v-model="form.username" placeholder="请输入账号"/>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form.realName" placeholder="请输入姓名"/>
          </el-form-item>
          <!--头像上传-->
          <div class="avatar-upload-wrapper" style="display: flex;margin-bottom: 10px;margin-top: -7px">
            <!-- {{ modelValue }} -->
            <el-form-item label="头像" style="margin-top: 20px"/>
            <el-upload
                class="avatar-uploader"
                :http-request="uploadFile"
                :show-file-list="false"
                :on-progress="handleAvatarSuccess"
                :on-change="handChanges"
            >
              <img v-if="form.headUrl" :src="form.headUrl" class="avatar"/>
              <el-icon v-else>
                <Plus/>
              </el-icon>
            </el-upload>
          </div>
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio :value="0">男</el-radio>
              <el-radio :value="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="职业">
            <el-radio-group v-model="form.occupation" disabled>
                <el-radio-button label="学生" :value=0 />
                <el-radio-button label="教师" :value=1 />
                <el-radio-button label="管理员" :value=2 />
            </el-radio-group>
          </el-form-item>
          <el-button style="margin-left: 25px;font-size: 11px;color: red;margin-top: -40px" link
                     @click="authentication">请前往身份认证修改
          </el-button>
          <el-form-item style="margin-top: 5px" label="手机号">
            <el-input disabled v-model="form.mobile" placeholder="请输入手机号"/>
          </el-form-item>
          <el-form-item label="地址">
            <addressSelector v-model="form.address" :placeholder="form.address" :address-type="1" @addressChange="addressChange" />
          </el-form-item>
          <br>
          <el-button @click="submit" type="success" style="margin-left: 100px" round>提交</el-button>
          <el-button type="info" @click="isUpdate = false" round>取消</el-button>
        </el-form>
      </div>
      <div v-if="!isUpdate">
        <el-descriptions
          title="个人信息"
          border
          size="large"
          style="margin-top: 20px"
        >
          <el-descriptions-item
            :rowspan="1"
            :width="140"
            label="头像"
            align="center"
          >
            <el-image
              style="width: 100px; height: 100px; border-radius: 50%;"
              :src="userData.headUrl"
            />
          </el-descriptions-item>
          <el-descriptions-item label="账号">{{ userData.username }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{ userData.realName }}</el-descriptions-item>
          <el-descriptions-item label="电话">{{userData.mobile}}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{userData.email}}</el-descriptions-item>
          <el-descriptions-item label="性别">{{userData.sex===0?'男':'女'}}</el-descriptions-item>
          <el-descriptions-item label="职业">
            <el-tag size="default">{{ userData.occupation==0?'学生':userData.occupation==1?'教师':'管理员' }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="地址">{{ userData.address }}</el-descriptions-item>
        </el-descriptions>
        <div style="display: flex; justify-content: center;margin-top: 10px">
          <el-button size="default" type="primary" @click="updateUserData">修改</el-button>
        </div>
      </div>
      <div>

      </div>
    </div>
  </div>
</template>
<script setup>
import {reactive, ref} from 'vue'
import {Plus, UploadFilled} from '@element-plus/icons-vue'
import addressSelector from "@/pages/account/components/addressSelector.vue";
import {useUserStore} from '@/pinia/stores/user'
import {ElMessage} from "element-plus";
const disabled = ref(false)
const userStore = useUserStore()
const userData = userStore.userInfo
import axios from "axios";
import {changeInformation, delectUser} from "../userData/userApi.js";
const emit = defineEmits(); // 引入 `defineEmits`
const isUpdate = ref(false)
const uploadFile = (params) => {
  //覆盖默认上传行为，
  form.file = params.file
}
const handleAvatarSuccess = () => {}
const addressChange = (data) => {
  form.address = data
}
const handChanges = async (file) => {
  let formData = new FormData;
  formData.append("file", file.raw)
  await axios.post('/api/upload/singleFileUpload', formData, {
    headers: {'Content-Type': 'multipart/form-data'}
  }).then(res => {
    if (res.data.code === 0) {
      ElMessage.warning("上传成功")
      form.headUrl = res.data.data

    } else {
      ElMessage.error("上传失败")
    }
  }).catch(res => {

  });
}

let form = reactive({
  id: userData.id,
  username: userData.username,
  realName: userData.realName,
  updater: userData.updater,
  headUrl: userData.headUrl,
  mobile: userData.mobile,
  email: userData.email,
  occupation: userData.occupation,
  sex: userData.sex,
  address: userData.address, // 添加地址字段
})

const submit = async () => {
  if (form.username === "" && form.realName === "" &&
      form.headUrl === "" && form.sex === "" &&
      form.mobile === "" && form.updater === "") {
    ElMessage.error("请输入信息再提交")
  } else {
    form.email = userData.email;
    await changeInformation(form).then(res => {
      if (res.code === 0){
        ElMessage.success("修改成功")
        form = res.data
        //更新用户信息
        useUserStore().setUserInfo(form);
        isUpdate.value = false
      } else {
        ElMessage.error("修改失败")
      }
    }).catch(error => {
    })
  }
}

const updateUserData = () => {
  isUpdate.value = true
  form = userData;
}

const authentication = () => {
  emit('authentication'); // 触发自定义事件
}

</script>


<style scoped>
.avatar-uploader img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.content-area {
  width: 800px;
  height: 600px;
}

.upload-demo {
  width: 300px;
  padding: 10px;
}

.el-icon--upload {
  width: 40px;
  height: 40px;
}

.el-upload__text {
  font-size: 15px;
  margin-bottom: 10px;
  margin-top: -10px;
}

.avatar-box-border {
  border: 1px dashed #409eff !important;
}

.avatar-box {
  border-radius: 50%;
  margin-left: 20px;
  cursor: pointer;
  position: relative;
  border: 2px solid #eee;
  overflow: hidden;

  &:hover::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .03);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .avatar-marker {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #409eff;

    i.iconfont {
      font-size: 24px;
    }
  }
}


</style>
